<template>
    <h1>我是标签</h1>
    <span>当前网站拥有的标签有</span>
    <div v-for="(tag, index) in items" :keys="index" class="tag-item">
        <h2>{{ tag.title }}</h2>
    </div>
    <button @click="toggleAddForm" class="action-btn">添加标签</button>
    <div v-if="showAddForm" class="input-group">
        <input type="text" v-model="newTagTitle" placeholder="请输入标签名称">
        <button @click="handleAddTag" class="add-btn">确定添加</button>
    </div>
    <button @click="toggleSelectForm" class="action-btn">查找标签</button>
    <div v-if="showSelectForm" class="input-group">
        <input type="text" v-model="SelectTagTitle" placeholder="请输入标签名称">
        <button @click="handselectTag" class="add-btn">确定查找</button>
        <span>{{ searchKeyword }}</span>
    </div>
    <button @click="toggleUpdateForm" class="action-btn">修改标签</button>
    <div v-if="showUpdateForm" class="input-group">
        <input type="text" v-model="oldTagTitle" placeholder="请输入原标签名">
        <input type="text" v-model="newTagTitleForUpdate" placeholder="请输入新的标签名">
        <button @click="handleUpdateTag" class="add-btn">确认修改</button>
    </div>
    <button @click="toggleDeleteForm" class="action-btn">删除标签</button>
    <div v-if="showDeleteForm" class="input-group">
        <input type="text" v-model="deleteTagTitle" placeholder="请输入要删除的标签名">
        <button @click="handleDelete" class="add-btn">确认删除</button>
    </div>
</template>
<script setup>
import request from '@/request';
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted } from 'vue';
const items = ref([])
const newTagTitle = ref('')
const SelectTagTitle = ref('')
const showAddForm = ref(false)
const showSelectForm = ref(false)
const searchKeyword = ref('')
const showUpdateForm = ref(false)
const oldTagTitle = ref('')
const newTagTitleForUpdate = ref('')
const showDeleteForm = ref(false)
const deleteTagTitle = ref('')
onMounted(() => {
    fetchTags()
})
const fetchTags = () => {
    request({
        url: '/addtag/',
        method: 'get'
    }).then(response => {
        if (response.status == 200) {
            console.log('标签数据:', response.data)
            ElMessage.success('获取标签列表成功')
            items.value = response.data.tags
            console.log(response.data.tags)
        }
    }).catch(error => {
        console.error('获取标签失败', error.response)
        ElMessage.error('获取标签失败' + error)
    })
}
const toggleAddForm = () => {
    showAddForm.value = !showAddForm.value;
}
const toggleSelectForm = () => {
    showSelectForm.value = !showSelectForm.value;
}
const toggleUpdateForm = () => {
    showUpdateForm.value = !showUpdateForm.value
}
const toggleDeleteForm = () => {
    showDeleteForm.value = !showDeleteForm.value
}
function handleAddTag() {
    if (!newTagTitle.value.trim()) {
        ElMessage.warning('标签名不能为空')
        return
    }
    request({
        url: '/addtag/',
        method: 'post',
        data: {
            title: newTagTitle.value.trim()
        }
    }).then(response => {
        if (response.status == 200) {
            ElMessage.success('添加标签成功')
            fetchTags()
            toggleAddForm()
            newTagTitle.value = ''
        }
    }).catch(error => {
        ElMessage.error('添加标签失败' || response.data.message)
    })
}
function handselectTag() {
    if (!SelectTagTitle.value.trim()) {
        fetchTags();
        return
    }
    request({
        url: '/searchtag/',
        method: 'get',
        params: {
            title: SelectTagTitle.value
        }
    }).then(response => {
        if (response.status == 200) {
            ElMessage.success('查找标签成功')
            searchKeyword.value = response.data.data.title;
            console.log('查找到的标签', response.data.data.title)
            fetchTags()
            toggleSelectForm()
            SelectTagTitle.value = ''
        }
    }).catch(error => {
        ElMessage.error(error.response?.data?.message || '查找标签失败' + error.message)
    })
}
function handleUpdateTag() {
    request({
        url: '/updatetag/',
        method: 'post',
        data: {
            old_title: oldTagTitle.value,
            new_title: newTagTitleForUpdate.value
        }
    }).then(response => {
        if (response.status == 200) {
            ElMessage.success('标签修改成功')
            fetchTags()
            toggleUpdateForm()
            oldTagTitle.value=''
            newTagTitleForUpdate.value=''
        }
    }).catch(error => {
        ElMessage.error(error.response?.data?.message || '标签修改失败' + error.message)
    })
}
function handleDelete() {
    if (!deleteTagTitle.value.trim()) {
        ElMessage.warning('请输入要删除的标签名')
        return
    }
    request({
        url: '/deletetag/',
        method: 'post',
        data: {
            title: deleteTagTitle.value.trim()
        }
    }).then(response => {
        if (response.status == 200) {
            ElMessage.success('标签删除成功')
            fetchTags()
            toggleDeleteForm()
            deleteTagTitle.value=''
        }
    }).catch(error => {
        ElMessage.error(error.response?.data?.message || '标签删除失败' + error.message)
    })
}
</script>
<style scoped></style>